<template>
  <!-- 组件的模板部分，定义了 HTML 结构 -->
  <div class="idassistant-container">
    <!-- 使用 Element UI 的卡片组件展示主要内容 -->
    <el-card class="main">
      <!-- 使用 Element UI 的图片组件展示图片，支持预览功能 -->
      <el-image :src="image" :preview-src-list="imageList" fit="fill">
        <!-- 当图片加载失败时，显示自定义的错误提示+ -->
        <template #error>
          <span class="image_col"> 请联系管理员! </span>
        </template>
      </el-image>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getIdImage } from "@/api/manage/agentmenu/index"; // 获取id码
// 使用 ref 创建响应式引用，用于存储图片 URL
const image = ref("");
// 创建响应式引用，用于存储图片预览列表
const imageList = ref([]);
// 定义异步函数，用于获取图片信息
const handlegetldlmage = async () => {
  let res = await getIdImage();
  console.log(res);
  if (res.entity) {
    image.value = res.entity;
    imageList.value.push(image.value);
  }
};

onMounted(() => {
  handlegetldlmage();
});
</script>
<style lang="scss" scoped>
.idassistant-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .main {
    width: 600px;
    margin-top: 24px;
    border-radius: 16px;
    .el-image {
      width: 100%;
      height: 650px;
      display: flex;
      justify-content: center;
      align-items: center;
      .image_col {
        color: red;
      }
    }
    .el-input {
      margin-top: 16px;
    }
  }
}
</style>